<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清除前端存储</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .container {
            background: white;
            border-radius: 20px;
            padding: 40px;
            max-width: 600px;
            width: 100%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 10px;
            font-size: 2em;
        }

        .subtitle {
            text-align: center;
            color: #666;
            margin-bottom: 30px;
            font-size: 0.9em;
        }

        .info-box {
            background: #f0f4ff;
            border-left: 4px solid #667eea;
            padding: 15px 20px;
            margin-bottom: 25px;
            border-radius: 5px;
        }

        .info-box h3 {
            color: #667eea;
            margin-bottom: 10px;
            font-size: 1.1em;
        }

        .info-box p {
            color: #555;
            line-height: 1.6;
            margin-bottom: 8px;
        }

        .status {
            background: #fff;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 25px;
        }

        .status-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #f0f0f0;
        }

        .status-item:last-child {
            border-bottom: none;
        }

        .status-label {
            font-weight: 600;
            color: #333;
        }

        .status-value {
            color: #666;
            font-family: 'Courier New', monospace;
            font-size: 0.9em;
        }

        .status-value.has-data {
            color: #f56c6c;
            font-weight: 600;
        }

        .status-value.no-data {
            color: #67c23a;
            font-weight: 600;
        }

        button {
            width: 100%;
            padding: 15px;
            font-size: 1.1em;
            font-weight: 600;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-bottom: 15px;
        }

        .btn-clear {
            background: linear-gradient(135deg, #f56c6c 0%, #e74c3c 100%);
            color: white;
        }

        .btn-clear:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(245, 108, 108, 0.4);
        }

        .btn-check {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .btn-check:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
        }

        .btn-redirect {
            background: linear-gradient(135deg, #67c23a 0%, #5daf34 100%);
            color: white;
        }

        .btn-redirect:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(103, 194, 58, 0.4);
        }

        .success-message {
            background: #f0f9ff;
            border: 2px solid #67c23a;
            color: #67c23a;
            padding: 15px 20px;
            border-radius: 10px;
            text-align: center;
            font-weight: 600;
            margin-bottom: 20px;
            display: none;
        }

        .success-message.show {
            display: block;
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .emoji {
            font-size: 1.5em;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1><span class="emoji">🗑️</span>清除前端存储</h1>
        <p class="subtitle">数字藏品交易平台 - 用户数据清理工具</p>

        <div class="info-box">
            <h3>📋 当前状态</h3>
            <p>此工具将清除浏览器中保存的登录信息</p>
        </div>

        <div class="status" id="storageStatus">
            <div class="status-item">
                <span class="status-label">JWT Token:</span>
                <span class="status-value" id="tokenStatus">检查中...</span>
            </div>
            <div class="status-item">
                <span class="status-label">用户信息:</span>
                <span class="status-value" id="userStatus">检查中...</span>
            </div>
            <div class="status-item">
                <span class="status-label">LocalStorage 项数:</span>
                <span class="status-value" id="itemCount">检查中...</span>
            </div>
        </div>

        <div class="success-message" id="successMessage">
            ✅ 前端存储已成功清除！
        </div>

        <button class="btn-check" onclick="checkStorage()">
            <span class="emoji">🔍</span>检查当前状态
        </button>

        <button class="btn-clear" onclick="clearStorage()">
            <span class="emoji">🗑️</span>清除所有存储数据
        </button>

        <button class="btn-redirect" onclick="goToApp()">
            <span class="emoji">🚀</span>前往应用首页
        </button>
    </div>

    <script>
        function checkStorage() {
            const token = localStorage.getItem('jwt_token');
            const userInfo = localStorage.getItem('user_info');
            const itemCount = localStorage.length;

            document.getElementById('tokenStatus').textContent = token ? '已存在 ✗' : '未存储 ✓';
            document.getElementById('tokenStatus').className = 'status-value ' + (token ? 'has-data' : 'no-data');

            document.getElementById('userStatus').textContent = userInfo ? '已存储 ✗' : '未存储 ✓';
            document.getElementById('userStatus').className = 'status-value ' + (userInfo ? 'has-data' : 'no-data');

            document.getElementById('itemCount').textContent = itemCount + ' 项';
            document.getElementById('itemCount').className = 'status-value ' + (itemCount > 0 ? 'has-data' : 'no-data');

            console.log('Token:', token);
            console.log('User Info:', userInfo);
            console.log('LocalStorage 内容:', localStorage);
        }

        function clearStorage() {
            if (confirm('确定要清除所有前端存储数据吗？\n这将删除：\n- JWT Token\n- 用户信息\n- 所有 localStorage 数据')) {
                // 清除 localStorage
                localStorage.clear();

                // 显示成功消息
                const successMsg = document.getElementById('successMessage');
                successMsg.classList.add('show');

                // 更新状态显示
                checkStorage();

                // 3秒后隐藏成功消息
                setTimeout(() => {
                    successMsg.classList.remove('show');
                }, 3000);

                console.log('✅ LocalStorage 已清除');
            }
        }

        function goToApp() {
            window.location.href = 'http://localhost:8081';
        }

        // 页面加载时自动检查
        window.onload = function() {
            checkStorage();
        };
    </script>
</body>
</html>

